<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <style type="text/css">
        .main{
            border: 2px solid black;
            border-radius: 20%;
            width: 450px;
            height: 250px;
            margin: 200px auto;
        }
        .innermain{
            margin-left: 80px;
        }
        .account{
            margin-top: 40px;
        }
        #submit{
            margin-top: 20px;
            margin-left: 20px;
        }
        .reset{
            margin-top: 20px;
            margin-left: 20px;
        }
        .mail{
            color: #fff;
        }
        .accou{
            color: white;
        }
        .pass{
            color: white;
        }
        .innermain a{
            width: 45px;
            height: 20px;
            font-size: 12px;
            color: black;
            background-color: #eaeaea;
            text-decoration: none;
            border: 1px solid black;
            padding: 3px 7px;
            margin-left: 20px;
        }
    </style>
</head>
<body>
<script type="text/javascript">
    var accountRegexp = /^[a-zA-z][A-Za-z1-9_-]+$/;
    var passwordRegexp = /^[a-zA-z][A-Za-z1-9_-]+$/;
    var mailRegexp = /^[1-9]\d{5,10}@(qq|163|139)\.com$/;
    $(function () {
        $(".account").blur(function () {
            if ($(this).val().search(accountRegexp) != -1){
                $(".accou").css({"color": "#3cb371", "display": "inline-block"}).html("√");
                //用ajax发一个请求给servlet
                $.ajax({
                    "url":"/checkServlet",
                    "data":{"username":$(".account").val()
                    },
                    "dataType":"json",
                    "type":"POST"
                }).done(function (data) {
                    if(data.username != null && data.username.length >0){
                        if($(".account").val().search(accountRegexp) != -1){
                            $(".main").html("注册成功......");
                            $(".submit").removeAttr("disabled");
                        }
                    }else{
                        $(".submit").attr("disabled","disabled");
                    }
                });
            } else {
                $(".accou").css({"color": "#f00", "display": "inline-block"}).html("×");
            }
        });
        $(".password").blur(function () {
            if ($(this).val().search(passwordRegexp) != -1){
                $(".pass").css({"color": "#3cb371", "display": "inline-block"}).html("√");
            } else {
                $(".pass").css({"color": "#f00", "display": "inline-block"}).html("×");
            }
        });
        $(".email").blur(function () {

            var ret = mailRegexp.test($(this).val());
            if ($(this).val().search(mailRegexp) != -1) {
                var mailType = $(this).val().match(mailRegexp)[1];
                $(".mail").css({"color": "#3cb371", "display": "inline-block"}).html(mailType + "邮箱格式正确");
            } else {
                $(".mail").css({"color": "#f00", "display": "inline-block"}).html("邮箱错误!");
            }
        });

    });

</script>
    <div class="main">
        <form action="/getSign" method="post" class="innermain">
            用户名: &nbsp;&nbsp;<input type="text" class="account" name="username" id="account" placeholder="请输入您的用户名"> &nbsp;<span class="accou">√</span>
            <br><br>
            密 &nbsp;&nbsp;码: &nbsp;&nbsp;<input type="password" name="password" id="password" class="password" placeholder="请输入密码"> &nbsp;<span class="pass">√</span>
            <br><br>
            邮 &nbsp;&nbsp;箱: &nbsp;&nbsp;<input type="email" name="email" class="email" placeholder="请输入qq/163/139邮箱"> &nbsp;<span class="mail">邮箱正确!</span>
            <br><br>
            <input type="submit" class="submit" id="submit" value="注册">
            <input type="reset" class="reset" id="reset" value="重置">
            <a href="Login.html">登录</a>
        </form>
    </div>

</body>
</html>